<#include "../layout/layout.ftl">
<@layout>
    <input id="active-menu-url" type="hidden" value="${request.contextPath}/admin/tunnel/list.html"/>
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>隧道</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="javascript:void(0);">隧道</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="${request.contextPath}/admin/tunnel/list.html">我的隧道</a>
                </li>
                <li class="breadcrumb-item active">
                    <strong>新增隧道</strong>
                </li>
            </ol>
        </div>
    </div>

    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>新增隧道</h5>
                    </div>
                    <div class="ibox-content">
                        <form id="editTunnel">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">隧道名称</label>
                                <div class="col-sm-10">
                                    <input name="name" type="text" class="form-control" placeholder="一条免费隧道"
                                           value="${record.name}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">隧道协议</label>
                                <div class="col-sm-10">
                                    <select name="protocol" class="form-control">
                                        <option value="http">HTTP协议</option>
                                    </select>
                                    <span class="form-text m-b-none">目前暂时只支持HTTP</span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">域名/远程端口</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" value="系统随机分配" readonly>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">目标IP</label>
                                <div class="col-sm-10">
                                    <input name="host" type="text" class="form-control" value="${record.localHost}">
                                    <span class="form-text m-b-none">如127.0.0.1，则输入127.0.0.1。后期可任意修改</span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">目标端口</label>
                                <div class="col-sm-10">
                                    <input name="port" type="text" class="form-control" value="${record.localPort}">
                                    <span class="form-text m-b-none">如8080，则输入8080。后期可任意修改</span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group row">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <a id="addTunnelBtn" href="javascript:void(0);" class="btn btn-primary
                                    btn-sm">保存设置</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</@layout>
<script type="text/javascript">
    $(function () {
        $("#addTunnelBtn").click(function () {
            let obj = Qs.parse($("#editTunnel").serialize());
            obj.id = "${record.id}";
            if (obj.name === "") {
                layer.alert("隧道名称不能为空", {
                    icon: 0,
                    skin: 'layerBtn'
                });
                return false;
            }
            if (obj.port === "") {
                layer.alert("映射端口不能为空", {
                    icon: 0,
                    skin: "layerBtn"
                });
                return false;
            }
            const index = layer.load(1, {
                shade: [0.1, "#000"]
            });
            let res = $.ajax({
                url: "${request.contextPath}/admin/tunnel/edit/action",
                contentType: "application/json",
                type: "POST",
                dataType: "JSON",
                data: JSON.stringify(obj),
                async: false
            }).responseText;
            layer.close(index);
            res = JSON.parse(res);
            if (res.code === "200") {
                layer.alert("更新成功", {
                    icon: 1,
                    skin: "layerBtn"
                });
            } else {
                layer.alert(res.message, {
                    icon: 2,
                    skin: "layerBtn"
                });
            }
        });
    });
</script>